//@import "../variable";
//@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,400,900,800i");
//
//body {
//  --slides-per-page: 2;
//  margin: 0;
//  overflow: hidden;
//  height: 100vh;
//  font-family: 'Roboto Condensed', sans-serif;
//  color: white;
//}
//
//a {
//  text-decoration: none;
//  color: inherit;
//}
//
//#hero-slides {
//  width: 100%;
//  --page: 0;
//  height: 100vh;
//  background: #25303c;
//  background: linear-gradient(90deg, #3e4751 0%, #25303c 100%);
//}
//#hero-slides #header {
//  height: 12vh;
//  line-height: 12vh;
//  padding: 0 3vw;
//  position: relative;
//}
//#hero-slides #header #logo {
//  font-size: 2.5vh;
//  font-style: italic;
//}
//#hero-slides #header #logo:before {
//  /*content: 'The';*/
//  text-transform: uppercase;
//  font-weight: 100;
//  margin-right: 0.4em;
//}
//#hero-slides #header #logo:after {
//  /*content: 'Wall';*/
//  text-transform: uppercase;
//  font-weight: 800;
//}
//#hero-slides #header #menu {
//  position: absolute;
//  top: 0;
//  right: 0;
//  bottom: 0;
//  cursor: pointer;
//  padding: 0 3vw;
//}
//#hero-slides #header #menu:before {
//  font-size: 1.75vh;
//  /*content: 'Play Demo';*/
//  content: '自动播放';
//  margin-right: 0.5em;
//  text-transform: uppercase;
//}
//#hero-slides #header #menu #hamburger {
//  display: inline-block;
//}
//#hero-slides #header #menu #hamburger .slice {
//  background: white;
//  height: 0.2vh;
//  width: 1vw;
//}
//#hero-slides #header #menu #hamburger .slice:not(:last-child) {
//  margin-bottom: 0.5vh;
//}
//#hero-slides #slides-cont {
//  position: relative;
//  --button-height: 6vh;
//  --button-spacing: 0.2vh;
//}
//#hero-slides #slides-cont .button {
//  width: 5vw;
//  height: var(--button-height);
//  background: #0d96f2;
//  position: absolute;
//  right: 5.375vw;
//  top: 38vh;
//  z-index: 100;
//  cursor: pointer;
//}
//#hero-slides #slides-cont .button:before, #hero-slides #slides-cont .button:after {
//  line-height: var(--button-height);
//  position: absolute;
//  margin-left: -0.25vw;
//  pointer-events: none;
//  -webkit-transform: scale(0.75, 1.5);
//  transform: scale(0.75, 1.5);
//  transition: 125ms ease-in-out;
//}
//#hero-slides #slides-cont .button:before {
//  left: 50%;
//}
//#hero-slides #slides-cont .button:after {
//  opacity: 0;
//}
//#hero-slides #slides-cont .button:hover:before, #hero-slides #slides-cont .button:hover:after {
//  transition: 250ms ease-in-out;
//}
//#hero-slides #slides-cont .button:hover:before {
//  opacity: 0;
//}
//#hero-slides #slides-cont .button:hover:after {
//  left: 50% !important;
//  opacity: 1;
//}
//#hero-slides #slides-cont #next {
//  margin-top: calc(~"-1 * (var(--button-height) + var(--button-spacing))");;
//}
//#hero-slides #slides-cont #next:before, #hero-slides #slides-cont #next:after {
//  content: '>';
//}
//#hero-slides #slides-cont #next:after {
//  left: 30%;
//}
//#hero-slides #slides-cont #next:hover:before {
//  left: 70%;
//}
//#hero-slides #slides-cont #prev {
//  margin-top: var(--button-spacing);
//  opacity: calc(~"var(--page) + .5");
//  transition: 500ms opacity;
//}
//#hero-slides #slides-cont #prev:before, #hero-slides #slides-cont #prev:after {
//  content: '<';
//}
//#hero-slides #slides-cont #prev:after {
//  left: 70%;
//}
//#hero-slides #slides-cont #prev:hover:before {
//  left: 30%;
//}
//#hero-slides #slides-cont #next-catch,
//#hero-slides #slides-cont #prev-catch {
//  width: 10vw;
//  height: 76vh;
//  position: absolute;
//  top: 0;
//  z-index: 90;
//}
//#hero-slides #slides-cont #next-catch {
//  right: 0;
//}
//#hero-slides #slides-cont #prev-catch {
//  left: 0;
//}
//#hero-slides #slides {
//  --slides-height: 76vh;
//  width: auto;
//  height: var(--slides-height);
//  padding: 0 10vw;
//  font-size: 0;
//  white-space: nowrap;
//  position: absolute;
//  -webkit-transform: translate3D(calc~"(var(--page) * -80vw)",0,0);;
//  transform: translate3D(calc~"(var(--page) * -80vw)",0,0);
//  transition: 1500ms -webkit-transform cubic-bezier(0.7, 0, 0.3, 1);
//  transition: 1500ms transform cubic-bezier(0.7, 0, 0.3, 1);
//  transition: 1500ms transform cubic-bezier(0.7, 0, 0.3, 1), 1500ms -webkit-transform cubic-bezier(0.7, 0, 0.3, 1);
//}
//#hero-slides #slides .slide {
//  display: inline-block;
//  vertical-align: top;
//  font-size: 1.5vw;
//  width: 24em;
//  height: var(--slides-height);
//  margin: 0 1.333em;
//  background: #101419;
//  color: white;
//  background-size: cover;
//  background-position: center;
//  white-space: normal;
//  word-break: break-word;
//  position: relative;
//}
//#hero-slides #slides .slide:before {
//  content: '';
//  display: block;
//  background: linear-gradient(180deg, rgba(86, 97, 108, 0) 0%, rgba(33, 52, 69, 0.7) 100%);
//  opacity: 0;
//  position: absolute;
//  top: 0;
//  left: 0;
//  right: 0;
//  bottom: 0;
//}
//#hero-slides #slides .slide .number {
//  position: absolute;
//  top: 2em;
//  left: 2em;
//  -webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
//  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
//}
//#hero-slides #slides .slide .number, #hero-slides #slides .slide .number:before, #hero-slides #slides .slide .number:after {
//  vertical-align: middle;
//}
//#hero-slides #slides .slide .number:before, #hero-slides #slides .slide .number:after {
//  display: inline-block;
//  content: '';
//  height: 0.133em;
//  margin-top: -0.2em;
//  background: white;
//}
//#hero-slides #slides .slide .number:before {
//  width: 0;
//  margin-left: 0;
//}
//#hero-slides #slides .slide .number:after {
//  width: 3em;
//  margin-left: 1em;
//}
//#hero-slides #slides .slide .body {
//  position: absolute;
//  bottom: 2em;
//  left: 2em;
//  right: 2em;
//}
//#hero-slides #slides .slide .location,
//#hero-slides #slides .slide .headline {
//  position: relative;
//  bottom: 0;
//  cursor: default;
//}
//#hero-slides #slides .slide:before,
//#hero-slides #slides .slide .number:before,
//#hero-slides #slides .slide .number:after,
//#hero-slides #slides .slide .location,
//#hero-slides #slides .slide .headline,
//#hero-slides #slides .slide .link {
//  transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);
//}
//#hero-slides #slides .slide .location {
//  font-weight: 100;
//  margin-bottom: 1.5em;
//  transition-delay: 60ms;
//}
//#hero-slides #slides .slide .headline {
//  font-size: 2.667em;
//  font-weight: 900;
//  transition-delay: 50ms;
//}
//#hero-slides #slides .slide .link {
//  display: inline-block;
//  background: #0d96f2;
//  padding: 0.5em 1.25em;
//  font-size: 1.33em;
//  opacity: 0;
//  position: absolute;
//  bottom: -2em;
//  pointer-events: none;
//  transition-delay: 25ms;
//}
//#hero-slides #slides .slide.hover:before, #hero-slides #slides .slide:hover:before {
//  opacity: 1;
//}
//#hero-slides #slides .slide.hover:before,
//#hero-slides #slides .slide.hover .number:before,
//#hero-slides #slides .slide.hover .number:after,
//#hero-slides #slides .slide.hover .location,
//#hero-slides #slides .slide.hover .headline,
//#hero-slides #slides .slide.hover .link, #hero-slides #slides .slide:hover:before,
//#hero-slides #slides .slide:hover .number:before,
//#hero-slides #slides .slide:hover .number:after,
//#hero-slides #slides .slide:hover .location,
//#hero-slides #slides .slide:hover .headline,
//#hero-slides #slides .slide:hover .link {
//  transition: 500ms cubic-bezier(0.7, 0, 0.3, 1);
//}
//#hero-slides #slides .slide.hover .number:before, #hero-slides #slides .slide:hover .number:before {
//  width: 3em;
//  margin-right: 1em;
//}
//#hero-slides #slides .slide.hover .number:after, #hero-slides #slides .slide:hover .number:after {
//  width: 0;
//  margin-right: 0;
//}
//#hero-slides #slides .slide.hover .location, #hero-slides #slides .slide:hover .location {
//  transition-delay: 0;
//  bottom: 4em;
//}
//#hero-slides #slides .slide.hover .headline, #hero-slides #slides .slide:hover .headline {
//  transition-delay: 100ms;
//  bottom: 1.5em;
//}
//#hero-slides #slides .slide.hover .link, #hero-slides #slides .slide:hover .link {
//  bottom: 0;
//  opacity: 1;
//  transition-delay: 250ms;
//  pointer-events: auto;
//}
//@media (min-width: 1200px) and (max-width: 1699px) {
//  body {
//    --slides-per-page: 3;
//  }
//
//  #hero-slides #slides .slide {
//    font-size: 1vw;
//  }
//}
//@media (min-width: 1700px) {
//  body {
//    --slide-per-age: 4;
//  }
//
//  #hero-slides #slides .slide {
//    font-size: 0.75vw;
//  }
//}
